<template>
    <div class='login'>
        <div class="loginDiv">
            <img src="../../public/zhuTu.png" alt="">
            <h2 class="title1">企业数据服务解决方案系统</h2>
            <h4 class="title2">Enterprise Data Service Solutions</h4>
            <div class="inputDiv">
                <el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
                    <el-input clearable :placeholder="placeholder1" prefix-icon="el-icon-user-solid"
                        v-model="ruleForm.username" @focus="handleOnfocus1" @blur="handleOnfocus3">
                    </el-input>
                    <el-input clearable :placeholder="placeholder2" prefix-icon="el-icon-lock" v-model="ruleForm.password"
                        @focus="handleOnfocus2" @blur="handleOnfocus3">
                    </el-input>
                    <el-row>
                        <el-button type="primary" @click="dengLu" :class="{ animate: animate }">登录</el-button>
                    </el-row>
                </el-form>
            </div>
            <div class="tiShi" v-if="isShow">
                <img src="../../public/jingGao.png" alt="">
                <div v-text="title"></div>
            </div>
        </div>
        <div class="bottomText">
            <p>Copyright © www.AxureUX.com, All Rights Reserved.</p>
            <p>Email : 5698401@qq.com QQ: 5698401</p>
        </div>
    </div>
</template>

<script>
import 'animate.css';
export default {
    name: 'login',
    data() {
        return {
            placeholder1: '请输入用户名称',
            placeholder2: '请输入登录密码',
            isShow: false,
            title: '',
            animate: false,
            ruleForm: {
                username: '',
                password: '',
            }
        };
    },

    components: {},

    computed: {},

    methods: {
        //获焦清空input框内容
        handleOnfocus1() {
            this.placeholder1 = '',
                this.isShow = false,
                this.animate = false
        },
        handleOnfocus2() {
            this.placeholder2 = '',
                this.isShow = false,
                this.animate = false
        },
        //失焦显示input框内容
        handleOnfocus3() {
            this.placeholder1 = '请输入用户名称',
                this.placeholder2 = '请输入登录密码'
        },
        //点击登录
        dengLu() {
            if (this.ruleForm.username == '') {
                this.animate = true;
                this.isShow = true;
                this.title = '请填写用户账号'
                return
            } else if (this.ruleForm.password == '') {
                this.animate = true;
                this.isShow = true;
                this.title = '请填写登录密码'
                return
            } else {
                this.$router.push('/home')
            }
        }
    }
}

</script>
<style lang='scss' scoped>
.login {
    width: 100vw;
    height: 100vh;
    text-align: center;
    background-image: url(../../public/login-beiJing.jpg);
    background-repeat: no-repeat;
    padding-top: 3.6vh;
    box-sizing: border-box;
}

.loginDiv {
    width: 410px;
    height: 570px;
    margin: 0px auto;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 0 6px 0px rgb(66, 66, 66);
    // padding-top: 30px;
    padding: 30px 36px 0px 36px;
    box-sizing: border-box;

    h2 {
        color: #0079fe;
        font-size: 26px;
    }

    h4 {
        color: #0079fe;
        font-weight: 400;
        font-size: 20px;
    }

    .inputDiv {
        padding: 30px 20px 0 20px;
        line-height: 70px;

        .el-button {
            width: 100%;
            height: 50px;
            background: #0079fe;
            font-size: 18px;
        }

        .el-input::v-deep .el-input__inner {
            outline: 4px;
            height: 50px;
        }
    }
}

.bottomText {
    margin-top: 52px;
    line-height: 24px;
    color: #ccc;
    font-size: 12px;
}

.animate {
    animation: shakeY;
    animation-duration: 0.8s;
    animation-iteration-count: 0.5;
}

.tiShi {
    width: 88%;
    height: 40px;
    background: #808080;
    margin: auto;
    border-radius: 4px;
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 12px;
    padding-left: 20px;
    box-sizing: border-box;

    img {
        width: 16px;
    }
}

// ::v-deep .el-input__suffix {
//     .el-input__suffix-inner {
//         border-color: none;
//         line-height: 54px;

//         .el-icon-circle-close:before {
//             font-family: 'iconfont';
//             content: "\2716" !important;
//             font-size: 18px;
//         }
//     }
// }
</style>